"use client";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import { useEffect } from "react";
import Head from "next/head";
export default function Product({ params: { locale }}: any) {
  const t = useTranslations("home");
  const router = useRouter();
  const sourceData = [
    {
      img: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      info: "four.product-info",
      name: "four.product",
      title: "four.product-title",
      path: `/${locale}/measurement`,
    },
    {
      img: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      info: "first.product-info",
      name: "first.product",
      title: "first.product-title",
      path: `/${locale}/inductive`,
    },
    {
      img: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      info: "second.product-info",
      name: "second.product",
      title: "second.product-title",
      path: `/${locale}/capacitive`,
    },
    {
      img: "http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png",
      info: "third.product-info",
      name: "third.product",
      title: "third.product-title",
      path: `/${locale}/photoelectric`,
    },
  ];
  useEffect(() => {
    localStorage.setItem("i18n_local", locale as string)
  }, [locale])
  return (
    <div className={"bg-gray-100 pb-10"}>
      <div
        className="h-80 bg-gray-300"
        style={{
          backgroundImage:
            "url('http://i18nport.dongsongkeji.com.cn/upload/14aa8e43-b41a-5f64-b93c-cbfb20b86c04.webp')",
            backgroundPosition: "50%",
        }}
      >
        <div className="h-full bg-no-repeat max-w-7xl mx-auto flex flex-col justify-center">
          <div className="px-10 text-black">
            <img className=" w-72 " src="http://i18nport.dongsongkeji.com.cn/upload/05ff7ad0-609a-53e9-9885-bcedf3f96d92.png" alt="" />
            {/* <div className={"my-6 text-3xl font-semibold"}>展品中心</div>
            <div className={"my-6 text-xl font-semibold"}>PRODUCT CENTER</div>
            <div className={"my-6 text-xl font-semibold"}>Продукция</div> */}
          </div>
        </div>
      </div>
      <ul className={"max-w-7xl mx-auto flex flex-wrap"}>
        {sourceData.map((source, index) => {
          return (
            <li
              onClick={() => router.push(source.path)}
              key={index}
              className={`my-2 px-4 w-1/2`}
            >
                <div className="hover-bottom-line transition-all bg-white rounded p-4  hover:shadow-xl">
                <h1 className={"w-full font-bold text-xl h-fit"}>
                {t(source.name)}
              </h1>
              <p className={"font-semibold text-over-2 h-10 text-sm text-gray-500"}>
                {t(source.title)}
              </p>
              <div className={"overflow-hidden cursor-pointer"}>
                <img
                  className={"object-contain float-left h-40"}
                  width={120}
                  height={120}
                  alt={""}
                  src={source.img}
                ></img>
                <p className={"px-10 text-black text-over-6 overflow-hidden"}>
                  {t(source.info)}
                </p>
              </div>
                </div>

            </li>
          );
        })}
      </ul>
    </div>
  );
}
